<template>
	<view :style="cbStyle">
		<view class="">
			<v-tabs
				:color="mydata.config.color.normal"
				:activeColor="mydata.config.color.active"
				:height="mydata.config.tabHeight * 2 + 'rpx'"
				:lineColor="mydata.config.color.active"
				:lineHeight="'4rpx'"
				v-model="current"
				:tabs="tabs"
				:scroll="mydata.content.length > 5"
				:margin="'0 ' + mydata.config.marigin.lr + 'rpx'"
			></v-tabs>
		</view>

		<swiper :current="current" class="swiper" :style="'height:' + swiperHeight + 'px'" @change="changeTab">
			<swiper-item v-for="(content, i) in mydata.content" :key="i">
				<view class="goods" :style="goodsStyle">
					<view :class="'goods-list block ' + content.data[content.type].config.type">
						<view class="good-box" :style="'border-radius:' + mydata.config.radius / 2 + 'px'" v-for="(item, d) in list[i]" :key="d" @click.stop="todetial(item)">
							<view
								class="good-box-item"
								:style="'background:' + content.data[content.type].config.product.probg + '; border-radius: ' + mydata.config.radius / 2 + 'px'"
							>
								<view class="img-box">
									<view class="good-img-box"><easy-loadimage :image-src="item.master"></easy-loadimage></view>
									<text class="title" v-if="mydata.config.type != 'list'" :style="'color:' + content.data[content.type].config.product.titleColor + ';'">
										{{ item.goods_name }}
									</text>
								</view>
								<view class="box-bottom" v-if="content.data[content.type].config.type != 'list'">
									<view class="price">
										<text
											class="pro-price"
											v-if="content.data[content.type].config.sell_price.show"
											:style="'color:' + content.data[content.type].config.sell_price.color + ';'"
										>
											<block v-if="item.p_type==2">
												
												<text class="txt">{{ item.sell_price }}</text>积分
											</block>
											<block v-else>
												￥
												<text class="txt">{{ item.sell_price }}</text>
											</block>
										</text>
										<view class="vip-price" v-if="item.now_level_price > 0">
											<text class="vip-name">会员价</text>
											<text>￥{{ item.now_level_price }}</text>
										</view>
										<text class="del-price" v-if="item.now_level_price == 0 && content.data[content.type].config.line_price.show">
											<text class="del-icon" :style="'color:' + content.data[content.type].config.line_price.color + ';'">
												{{ content.data[content.type].config.line_price.text }}
											</text>
											<text class="del-num" :style="'color:' + content.data[content.type].config.line_price.color + ';'">￥{{ item.original_price }}</text>
										</text>
									</view>
									<view class="btn">
										<text
											@click.stop="gotrolley(item)"
											v-if="content.data[content.type].config.add_button.show"
											class="buybtn-icon buybtn iconfont-m- icon-m-buy1"
										>
											<text
												:style="'font-size:20px;color:' + content.data[content.type].config.add_button.color + ';'"
												:class="content.data[content.type].config.add_button.icon + ' iconfont'"
											></text>
										</text>
										<text
											class="sales-num"
											v-if="content.data[content.type].config.sell_total.show"
											:style="'color:' + content.data[content.type].config.sell_total.color + ';'"
										>
											{{ content.data[content.type].config.sell_total.text }}:{{ item.sell + (item.is_virtual ? item.virtual_sell : 0) }}
										</text>
									</view>
								</view>
								<view class="right van-hairline--bottom" v-if="content.data[content.type].config.type == 'list'">
									<view>
										<text class="title" :style="'color:' + content.data[content.type].config.product.titleColor + ';'">{{ item.goods_name }}</text>
										<text class="subtitle">{{ item.subtitle }}</text>
									</view>
									<view class="right-bottom">
										<view class="price">
											<text
												class="pro-price"
												v-if="content.data[content.type].config.sell_price.show"
												:style="'color:' + content.data[content.type].config.sell_price.color + ';'"
											>
												<block v-if="item.p_type==2">
													
													<text class="txt">{{ item.sell_price }}</text>积分
												</block>
												<block v-else>
													￥
													<text class="txt">{{ item.sell_price }}</text>
												</block>
											</text>
											<view class="vip-price" v-if="item.now_level_price > 0">
												<text class="vip-name">会员价</text>
												<text>￥{{ item.now_level_price }}</text>
											</view>

											<text class="del-price" v-if="item.now_level_price == 0 && content.data[content.type].config.line_price.show">
												<text class="del-icon" :style="'color:' + content.data[content.type].config.line_price.color + ';'">
													{{ content.data[content.type].config.line_price.text }}
												</text>
												<text class="del-num" :style="'color:' + content.data[content.type].config.line_price.color + ';'">
													￥{{ item.original_price }}
												</text>
											</text>
										</view>
										<view class="btn">
											<text
												@click.stop="gotrolley(item)"
												v-if="content.data[content.type].config.add_button.show"
												class="buybtn-icon buybtn iconfont-m- icon-m-buy1"
											>
												<text
													:style="'font-size:20px;color:' + content.data[content.type].config.add_button.color + ';'"
													:class="content.data[content.type].config.add_button.icon + ' iconfont'"
												></text>
											</text>
											<text
												class="sales-num"
												v-if="content.data[content.type].config.sell_total.show"
												:style="'color:' + content.data[content.type].config.sell_total.color + ';'"
											>
												{{ content.data[content.type].config.sell_total.text }}:{{ item.sell + (item.is_virtual ? item.virtual_sell : 0) }}
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			scrollviewHigh: 667,
			swiperHeight: 100,
			current: 0,
			tabs: [],
			list: []
		};
	},

	computed: {
		// goodListClass() {
		// 	return 'goods-list block ' + this.mydata.currentTab.data[this.mydata.currentTab.type].config.type;
		// },
		goodsStyle() {
			let s = 'margin-top:' + this.mydata.config.marigin.ic + 'rpx;';
			s += 'padding:0 ' + this.mydata.config.marigin.lr + 'rpx';
			return s;
		},
		cbStyle() {
			let s = 'margin-top:' + this.mydata.config.marigin.top + 'px;margin-bottom:' + this.mydata.config.marigin.bottom + 'px;';
			return s;
		},
		...mapState({
			g_id: state => state.g_id
		})
	},
	created() {
		let tabs = [];
		this.mydata.content.forEach((a, i) => {
			tabs.push(a.name);
			this.getlist(a, i);
		});
		this.tabs = tabs;
	},
	watch: {
		g_id() {
			let tabs = [];
			this.mydata.content.forEach((a, i) => {
				tabs.push(a.name);
				this.getlist(a, i);
			});
			this.tabs = tabs;
		}
	},
	methods: {

		getlist(content, i) {
			let list = content.data[content.type].list;
			let cids = [];
			
			let type=list[0]?list[0].type:1
			list.forEach(a => {
				if(a.id){
					cids.push(a.id);
				}
				
			});
			this.$http(
				'/goods/getManyGoods',
				{
					cids: JSON.stringify(cids),
					type:type
				},
				'POST'
			).then(res => {
				if (res.statusCode == 200) {
					let list = res.data.msg.slice(0, this.mydata.content[i].data[content.type].limit);
					list.forEach(a => {
							a.p_type=type
						if (a.sku && a.sku.length > 0) {
							a.now_level_price = util.getminprice(a.sku);
						} else {
							if (a.level_price) {
								a.now_level_price = util.getprice(a);
							}
						}
					});
					this.list[i]=list
					// this.list.push(list);
					//swiper高度自适应
					this.getElementHeight('.goods');
						
					
					
				} else {
				}
			});
		},
	gotrolley(item) {
		let data = {
			show: true,
			id: item.id,
			type: item.p_type
		};
		this.$store.commit('settrolley', data);
	},
	todetial(item) {
		if (item.p_type == '2') {
			this.Jumpurl({
				type: 1,
				link:'../goods/detail?id='+item.id
			});
		} else {
			this.Jumpurl({
				type: 2,
				id: item.id
			});
		}
	},
		changeTab(e) {
			this.current = e.detail.current;
		},

		getElementHeight(element) {
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec(res => {
					if (!res) {
						//如果没获取到，再调一次
						this.getElementHeight('.goods');
					} else {

						let arr = res[0];
						let max = arr[0].height;
						for (let i = 0; i < arr.length - 1; i++) {
							max = max < arr[i + 1].height ? arr[i + 1].height : max;
						}
						if(max==0){
							this.getElementHeight('.goods');
						}else{
							
						}
						this.swiperHeight = max;
					}
				});
			}, 20);
		}
	}
};
</script>
<style lang="scss">
.goods {
	width: 100%;
	overflow: auto;
	padding: 16rpx 24rpx 0;
	box-sizing: border-box;
	i {
		font-style: normal;
	}
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		overflow: auto;
		min-width: 100%;
		box-sizing: border-box;
		padding-left: 0;

		.good-box {
			flex-shrink: 0;
			overflow: hidden;

			.good-box-item {
				overflow: hidden;
			}

			.img-box {
				overflow: hidden;
				position: relative;

				.good-img-box {
					position: relative;
					overflow: hidden;

					.good-img {
						width: 100%;
						display: block;
					}
				}
			}

			.title {
				width: 100%;
				box-sizing: border-box;
				color: #212121;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 28rpx;
				line-height: 40rpx;
				height: 80rpx;
				padding: 0 16rpx;
				margin: 16rpx 0 8rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.box-bottom {
				width: 100%;
				display: flex;
				box-sizing: border-box;
			}

			.btn {
				display: flex;
				flex-direction: column;
				margin: 0;

				.buybtn {
					// font-size: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: right;
				}

				.sales-num {
					height: 28rpx;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #969696;
					text-align: right;
				}
			}
			.price {
				display: flex;
				flex-direction: column;

				.pro-price {
					height: 48rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					line-height: 34rpx;

					.txt {
						font-size: 28rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-overflow: ellipsis;
						box-sizing: border-box;
						white-space: nowrap;
						overflow: hidden;
						font-style: normal;
						font-weight: bold;
					}
				}

				.del-price {
					display: flex;
					align-items: center;
					height: 28rpx;
					line-height: 28rpx;

					.del-icon {
						display: inline-block;
						font-size: 20rpx;
						height: 28rpx;
						line-height: 28rpx;
					}

					.del-num {
						display: inline-block;
						font-size: 20rpx;
						height: 28rpx;
						line-height: 28rpx;
						text-decoration: line-through;
					}
				}
			}
		}

		&.scroll {
			flex-direction: row !important;
			flex-wrap: nowrap;

			.good-box {
				padding-left: 16rpx;

				.good-box-item {
					position: relative;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.good-img-box {
						height: 312rpx;
						overflow: hidden;

						.good-img {
							min-height: 100%;
						}
					}
				}

				.box-bottom {
					padding: 0 16rpx 16rpx;
					justify-content: space-between;
				}
			}

			&.one {
				flex-direction: column;

				.good-box {
					width: 592rpx;

					.good-img-box {
						overflow: hidden;
						width: 100%;
						height: 276rpx;
					}
				}
			}

			&.two {
				.good-box-item {
					width: 312rpx;
				}
			}

			&.three {
				.del-price,
				.sales-num {
					display: none !important;
				}

				.good-box-item {
					width: 204rpx;

					.good-img-box {
						width: 100%;
						height: 204rpx;
						margin-bottom: 16rpx;
					}
				}
			}
		}

		&.block {
			&.one .good-box {
				width: 100%;

				.good-box-item {
					padding-bottom: 16rpx;

					.good-img-box {
						height: 322rpx;
					}
				}
			}

			&.one .good-box:nth-child(n + 2) {
				margin-top: 16rpx;
			}

			&.two .good-box {
				width: 50%;

				.good-box-item {
					position: relative;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.good-img-box {
						height: 344rpx;
					}
				}
			}

			&.two .good-box:nth-child(odd) {
				padding-right: 8rpx;
			}
			&.two .good-box:nth-child(even) {
				padding-left: 8rpx;
			}
			&.two .good-box:nth-child(n + 3) {
				margin: 16rpx 0 0;
			}

			&.three {
				.good-box {
					width: 33.33%;

					.del-price,
					.sales-num {
						display: none;
					}

					.good-img-box {
						height: 224rpx;
						margin-bottom: 16rpx;
					}
				}

				.good-box:nth-child(n + 4) {
					margin: 16rpx 0 0;
				}

				.good-box:nth-child(3n-1),
				.good-box:nth-child(3n) {
					padding-left: 8rpx;
				}

				.good-box:nth-child(3n-2),
				.good-box:nth-child(3n-1) {
					padding-right: 8rpx;
				}
			}

			.box-bottom {
				padding: 0 16rpx 16rpx;
				justify-content: space-between;
			}
		}

		&.list .good-box {
			border-radius: 0;
			width: 100%;
			margin: 0 auto;
			flex-direction: row;
			// padding: 16rpx 24rpx 0;
			margin-bottom: 20rpx;
			.right {
				height: 280rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// padding: 16rpx;
				// box-sizing: border-box;
				overflow: hidden;
				.title {
					margin-top: 0;
					padding: 0;
				}
				.subtitle {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #969696;
					padding: 0;
					margin-bottom: 22rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
					box-sizing: border-box;
				}
				.right-bottom {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					margin-bottom: 0;
					.price {
						display: flex;
						flex-direction: column;
						.pro-price {
							height: 48rpx;
						}
					}
				}
			}

			.good-box-item {
				display: flex;
				padding: 16rpx 24rpx;
			}

			.img-box {
				width: 281rpx;
				height: 281rpx;
				-ms-flex-negative: 0;
				flex-shrink: 0;
				margin-right: 8px;

				.good-img-box {
					height: 100%;
					display: block;

					.good-img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>
